<template>
  <div class="unity-container">
    <!-- Unity WebGL嵌入 -->
    <iframe 
      ref="unityFrame"
      src="/Publish/index.html" 
      class="unity-frame"
      @load="onUnityLoaded">
    </iframe>
    <div>{{ showPanel }}</div>
    <!-- 跟随物体的UI面板 -->
    <div 
      v-show="showPanel"
      ref="followPanel"
      class="follow-panel"
      :style="panelStyle">
      <div class="panel-content">
        <video src="/7b55d335b7c5d1724c07c7c3797a5f04.mp4" width="200" height="160" autoplay loop></video>
        <!-- <h3>物体位置追踪</h3> -->
        <p>当前坐标: ({{ currentPosition.x.toFixed(1) }}, {{ currentPosition.y.toFixed(1) }})</p>
        <!-- <div class="health-bar">
          <div class="health-fill" :style="{ width: health + '%' }"></div>
        </div>
        <p>生命值: {{ health }}%</p> -->
      </div>
    </div>
	 <!-- 摄像头1 -->
    <!-- <div 
      class="camera" 
      :style="camera1Style"
      :title="camera1Tooltip"
    >
      CAM1
    </div> -->
    
    <!-- 摄像头2 -->
    <!-- <div 
      class="camera" 
      :style="camera2Style"
      :title="camera2Tooltip"
    >
      CAM2
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'UnityVueIntegration',
  data() {
    return {
      currentPosition: { x: 0, y: 0 },
      showPanel: false,
      health: 100,
      iframeSize: { width: 0, height: 0 },
	  cameraPositions: {
        cam1: { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0, rotationZ: 0 },
        cam2: { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0, rotationZ: 0 }
      },
      // 摄像头在模型上的固定偏移位置
      cameraOffsets: {
        cam1: { x: 100, y: 50, z: 200 }, // 摄像头1的固定位置偏移
        cam2: { x: -100, y: 50, z: 200 }  // 摄像头2的固定位置偏移
      }
    };
  },
  computed: {
    panelStyle() {
      return {
        left: `${this.currentPosition.x}px`,
        top: `${this.currentPosition.y}px`,
        transform: 'translate(-50%, -100%)'
      };
    },
	camera1Style() {
    //   if (!this.isFollowing) return {};
      const pos = this.cameraPositions.cam1;
      console.error(pos)

      return {
        transform: `
          translate3d(${pos.x}px, ${pos.y}px, ${pos.z}px)
          rotateX(${pos.rotationX}deg)
          rotateY(${pos.rotationY}deg)
          rotateZ(${pos.rotationZ}deg)
        `
      };
	},
	camera1Tooltip() {
    //   if (!this.isFollowing) return '';
      const pos = this.cameraPositions.cam1;
      return `摄像头1位置: (${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)})\n` +
             `旋转: (${pos.rotationX.toFixed(2)}, ${pos.rotationY.toFixed(2)}, ${pos.rotationZ.toFixed(2)})`;
    },
  },
  mounted() {
    // 监听来自Unity的消息
    window.addEventListener('message', this.handleUnityMessage);
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.updateIframeSize);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleUnityMessage);
    window.removeEventListener('resize', this.updateIframeSize);
  },
  methods: {
    onUnityLoaded() {
      this.updateIframeSize();
      this.showPanel = true;
    },
    updateIframeSize() {
      if (this.$refs.unityFrame) {
        const rect = this.$refs.unityFrame.getBoundingClientRect();
        this.iframeSize = {
          width: rect.width,
          height: rect.height
        };
      }
    },
    handleUnityMessage(event) {
      // 确保消息来自Unity iframe
      if (event.source !== this.$refs.unityFrame.contentWindow) return;
      
      const data = event.data;
      
      if (data.type === 'positionUpdate') {
        // 根据iframe大小缩放坐标
        const scaleX = this.iframeSize.width / window.innerWidth;
        const scaleY = this.iframeSize.height / window.innerHeight;
        
        this.currentPosition = {
          x: data.x * scaleX,
          y: data.y * scaleY
        };
        
        // 模拟生命值变化
        // this.health = Math.max(0, this.health - 0.1);
        // if (this.health <= 0) this.health = 100;

		// let modelPosition = event.data
		// this.isFollowing = true
		// this.cameraPositions.cam1 = {
		// 	x: modelPosition.x + this.cameraOffsets.cam1.x,
		// 	y: modelPosition.y + this.cameraOffsets.cam1.y,
		// 	z: modelPosition.z + this.cameraOffsets.cam1.z,
		// 	rotationX: modelPosition.rotationX,
		// 	rotationY: modelPosition.rotationY,
		// 	rotationZ: modelPosition.rotationZ
		// };
      }
    }
  }
};
</script>

<style scoped>
.unity-container {
  position: relative;
  width: 100%;
  height: 80vh;
  border: 1px solid #2c3e50;
  border-radius: 8px;
  /* overflow: hidden; */
  background: #1a1a2e;
}

.unity-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.follow-panel {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

.panel-content {
  background: rgba(30, 30, 46, 0.85);
  backdrop-filter: blur(5px);
  color: #f8f8f2;
  border-radius: 12px;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid #6272a4;
  text-align: center;
}

.panel-content h3 {
  margin-top: 0;
  color: #8be9fd;
  font-size: 1.2rem;
}

.health-bar {
  background: #44475a;
  height: 12px;
  border-radius: 6px;
  margin: 10px 0;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5555, #ffb86c);
  transition: width 0.3s ease;
}
.camera {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  pointer-events: none;
  transition: transform 0.3s ease-out;
  transform-origin: center;
}
</style>